<template>
  <div class="right-wrap">
    <h3 class="home-title">{{title}}</h3>
    <ul class="gift-game-list">
      <!-- <li v-for="item in list">
        <router-link :to="{ path: '/details/game', query: { gameId: item.id }}">
          <i :style="{backgroundImage: 'url(' + item.icon + ')'}"></i>
          <h4>{{item.name}}</h4>
        </router-link>
      </li> -->
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array
    },
    title: {
      type: String,
      default: '大家都在玩'
    }
  }
}
</script>


<style lang="less" scoped>
.right-wrap {
  padding: 0 25px 20px;
  background: #fff;
  margin-bottom: 40px;
  box-shadow: 1px 1px 10px 1px #ddd;
  .home-title {
    line-height: 70px;
    border-bottom: 1px solid #eee;
  }
  .gift-game-list {
    overflow: hidden;
    padding-top: 20px;
    li {
      width: 90px;
      float: left;
      margin-right: 30px;
      margin-top: 10px;
      height: 126px;
      overflow: hidden;
      &:nth-child(2n) {
        margin-right: 0;
      }
      a {
        display: block;
      }
      i {
        display: block;
        width: 80px;
        height: 80px;
        margin: 5px;
        background-size: 100%;
      }
      h4 {
        line-height: 36px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
</style>

